<template>
    <video ref="video" :width="width" :height="height" :src="src" :autoplay="autoplay"></video>
</template>

<script>
  export default {
    name: 'Webcam',
    props: {
      autoplay: {
        type: Boolean,
        default: true
      },
      width: {
        type: Number,
        default: 400
      },
      height: {
        type: Number,
        default: 300
      },
      screenshotFormat: {
        type: String,
        default: 'image/jpeg'
      }
    },
    data () {
      return {
        video: '',
        src: '',
        stream: null,
        hasUserMedia: false,
      };
    },
    methods: {
      getPhoto () {
        if (!this.hasUserMedia) return null;

        const canvas = this.getCanvas();
        return canvas.toDataURL(this.screenshotFormat);
      },
      getCanvas () {
        if (!this.hasUserMedia) return null;

        const video = this.$refs.video;
        if (!this.ctx) {
          const canvas = document.createElement('canvas');
          canvas.height = video.clientHeight;
          canvas.width = video.clientWidth;
          this.canvas = canvas;

          this.ctx = canvas.getContext('2d');
        }

        const { ctx, canvas } = this;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        return canvas;
      }
    },

    mounted: function () {
      this.video = this.$refs.video;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

      if (navigator.getUserMedia) {
        navigator.getUserMedia({ video: true }, (stream) => {
          this.src = window.URL.createObjectURL(stream);
          this.stream = stream;
          this.hasUserMedia = true;
        }, (error) => {
          console.log(error);
        });
      }
    },

    beforeDestroy: function () {
      this.video.pause();
      this.src = '';
      console.log('this.stream.getTracks', this.stream)
      this.stream.getTracks()[0].stop();
    },

    destroyed: function () {
      console.log('Webcam Destroyed');
    }
  }
</script>
<style scoped>
  video {
    object-fit: fill;
  }
</style>
